<template>
<div class="kefu-container">
        <div class="header">
            <span style="float: left;">商家客服</span>
            <span style="float: right;">14:21</span>
        </div>
        <ul class="content">
            <li v-for="(item, index) of messageList" :key="index">
                <img :src="'./img/'+(item.isSelf?'r.png':'l.png')" :class="'img'+(item.isSelf?'right':'left')">
                <span :class="'span'+(item.isSelf?'right':'left')">{{item.message}}</span>
            </li>
        </ul>
        <div class="footer">
            <!-- 添加输入内容 -->
            <input id="text" type="text" placeholder="说点什么吧..." v-model="inputValue" @keyup.enter="chat">
            <!-- 给发送也绑定一个事件 -->
            <span id="btn" @click="chat">发送</span>
        </div>
    </div>
</template>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
export default {
  data () {
    return {
      //输入内容,双向数据绑定
      inputValue: '',
      //聊天窗口内容
      messageList: []
    }
  },
  methods: {
    chat () {
      // console.log(this.inputValue)
      // console.log(this)
      // 二.获取自己输入内容,将内容渲染到页面
      this.messageList.push({
        message: this.inputValue,
        isSelf: true
      })
      console.log(this.messageList)
      // 三.获取机器人接口内容,也将内容渲染到页面
      $.ajax({
        url: 'http://www.tuling123.com/openapi/api',
        data: {
          userid: 1, // 添加id,实现上下文连贯
          key: 'b6ef78a0c1f24fee90d2317139b9c3d5',
          info: this.inputValue
        },
          // 注意使用箭头函数,不然里面的this会发生变化
          success: (obj) => {
            console.log(obj)
            // 三.获取机器人接口内容,也将内容渲染到页面
            this.messageList.push({
              message:obj.text,
              isSelf:false
              })
            }
          })
        this.inputValue='' //最后清除文本框
    }
  }
}

</script>
<style lang="scss">
.kefu-container {
  width: 100%;
  height: 780px;
  background: #eee;
  margin: 0 auto 0;
  position: relative;
  box-shadow: 20px 20px 55px #777;
  .header {
    background: #000;
    height: 40px;
    color: #fff;
    line-height: 34px;
    font-size: 20px;
    padding: 0 10px;
  }
  .content {
    font-size: 20px;
    width: 100%;
    height: 5rem;
    overflow: auto;
    padding: 5px;
    li {
      margin-top: 10px;
      padding-left: 10px;
      width: 412px;
      display: block;
      clear: both;
      overflow: hidden;
      img {
        float: left;
        .imgleft {
          float: left;
        }
        .imgright {
          float: right;
        }
      }
      span {
        background: #7cfc00;
        padding: 10px;
        border-radius: 10px;
        float: left;
        margin: 6px 10px 0 10px;
        max-width: 310px;
        border: 1px solid #ccc;
        box-shadow: 0 0 3px #ccc;
        .spanleft {
          float: left;
          background: #fff;
        }
        .spanright {
          float: right;
          background: #7cfc00;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 50px;
    background: #666;
    position: absolute;
    bottom: 0;
    padding: 10px;
    #text {
      width: 70%;
      height: 45px;
      outline: none;
      font-size: 20px;
      text-indent: 10px;
      position: absolute;
      border-radius: 6px;
      left: 10px;
      bottom: 3px;
    }
    span {
      display: inline-block;
      width: 62px;
      height: 48px;
      background: #ccc;
      font-weight: 900;
      line-height: 45px;
      cursor: pointer;
      text-align: center;
      position: absolute;
      right: 10px;
      bottom: 1px;
      border-radius: 6px;
      &.hover {
        color: #fff;
        background: #999;
      }
    }
  }
}
</style>
